<template>
<div>
   <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
   
    <el-card>
      <div>
         <h1 style="display:inline-block">选择查看年份：</h1>
     <el-date-picker
      v-model="year"
      type="year"
      placeholder="选择年">
    </el-date-picker>
    <el-button @click="fun">查看</el-button>
      </div>
      <div id="main" style="margin-top:20px;width:1050px;height:600px"></div>
    </el-card>
</div>
</template>

<script>
import request from '../../api/index'
import *as echarts from 'echarts'
export default {
name:'Report',
data(){
 return{
  year:'',
   options:{
  title: {
    text: '业务月利润'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['宠物销售', '商品销售', '宠物医美'],
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      name:"月份",
      type: 'category',
      boundaryGap: false,
      data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12']
    }
  ],
  yAxis: [
    {
      name:"利润(万元)",
      type: 'value'
    }
  ],
  series: [
    {
      name: '宠物销售',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 432, 401, 534, 690, 330, 210,320,389,490,550,610]
    },
    {
      name: '商品销售',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310,350,290,450,420,210]
    },
    {
      name: '宠物医美',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [250, 332, 201, 154, 190, 330, 210,390,450,490,110,360]
    }
  ]
}
  }

},
created(){},
async mounted(){
  var myChart=echarts.init(document.getElementById('main'))
  
   const { data: res } = await request({url:'/reports/type/1',method:'get'})
    if (res.meta.status !== 200) {
      return this.$message.error('获取折线图数据失败！')
    }
    console.log(res.data)
    // 4. 准备数据和配置项
    const result = _.merge(res.data, this.options)
    console.log(result)
    //myChart.setOption(this.options)
  },
  methods:{
    fun(){
       var myChart=echarts.init(document.getElementById('main'))
      console.log("haha")
      myChart.setOption(this.options)
    }
  }
}
</script>

<style>

</style>